<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>趣味活动</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="stylesheet" type="text/css" th:href="@{css/materialdesignicons.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/bootstrap.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/animate.min.css}">
  <link rel="stylesheet" type="text/css" th:href="@{css/style.min.css}">
</head>

<body>
<div th:include="comm/comm.html"></div>
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid p-t-15">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                
                <div class="masonry-grid" data-provide="photoswipe"  id="img">
                </div>
       
              </div>
            </div>
          </div>
          
        </div>
        
      </div>
    
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
    $(function(){
                 $.ajax({
                      url: "ironall",
                      type: "post",
                       dataType: "json",
                      success: function(data){
                          // console.log(data)
                          showData(data);
                       },
                    error: function(msg){
                          alert("ajax连接异常："+msg);
                       }
                 });
             });
    function showData(data) {
        console.log(data)
        var str = "";
                for (var i = 0; i < data.data.length; i++) {
                    str = "<a class=\"masonry-item\" href=\"#!\"> <img src=\"images/" + data.data[i].iron + "\" alt=\"The selected child description\"></a>";
                    $("#img").append(str);
                 }
            }
</script>
</body>
</html>